<!--
 * @FileDescription 二维码轮播
 * @Author lz
 * @Date 20230804 10:16:55
 * @LastEditors lz
 * @LastEditTime 20230804 10:16:55
-->
<template>
    <div class="QR_wp">
        <img src="/images/Benz600/ic_close.png" class="hi_close" @click="close">

        <el-carousel :interval="4000" type="card" class="swiperBox">
            <el-carousel-item v-for="(item, index) in HomeContent.Default.QRList.value" :key="index" class="elItem">
                <div class="QRBOX">
                    <img :src="`/images/QRCode/${item.Name}.png`" class="QRimg">
                    <div class="IntroductionText">
                        {{ item.Desc }}
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang="ts">
import HomeContent from '../HomeContent';

async function close() {
    console.log('关闭页面');
    HomeContent.Default.QRType.value = false
}
</script>

<style scoped>
.QR_wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.el-carousel__item:nth-child(2n) {
    /* background-color: #99a9bf; */
}

.el-carousel__item:nth-child(2n + 1) {
    /* background-color: #d3dce6; */
}

.elItem {
    height: 625px;
}

.swiperBox {
    height: 700px;
    margin-top: 160px;
}

:deep().el-carousel__container {
    height: 700px !important;
}

:deep().el-carousel__mask {
    background: none;
}

.QRBOX {
    margin: 0 auto;
    width: 478px;
    height: 625px;
    background-image: url('/images/Benz600/QRcode_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
}

.hi_close {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 15px;
    top: 35px;
    transition: all 0.2s linear;
}

.hi_close:hover {
    transform: rotate(180deg);
    transition: all 0.2s linear;
}

.QRimg {
    width: 380px;
    padding-top: 110px;
}

.IntroductionText {
    margin: 0 auto;
    width: 360px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #358FB0;
    margin-top: 10px;
}
</style>